<template>
  <view class="page">
    <view class="image-list">
      <view v-for="(item,index) in fileList" :key="index" class="image-item">
        <image :src="item.value" @tap="previewImage(index)" mode="widthFix" lazy-load="true">
          <view slot="error" style="font-size: 24rpx;">加载失败</view>
        </image>
      </view>
    </view>
    <view class="u-item-title">
      {{selectDictLabel(releaseTypeList,lostAndFoundData.releaseType) + '--' + selectDictLabel(goodsTypeList,lostAndFoundData.goodsType)}}
    </view>
    <u-cell-group :border="false">
      </u-cell-item>
      <u-cell-item title="标题" :title-width="80" :value="lostAndFoundData.title" :arrow="false">
      </u-cell-item>
      <u-cell-item title="内容" :title-width="80" :value="lostAndFoundData.goodsDesc" :arrow="false">
        <view>{{lostAndFoundData.goodsDesc}}</view>
      </u-cell-item>
      <u-cell-item title="联系人姓名" :title-width="150" :value="lostAndFoundData.contactName" :arrow="false">
      </u-cell-item>
      <u-cell-item title="联系方式" :title-width="150" :value="lostAndFoundData.contactMode" :arrow="false">
      </u-cell-item>
      <u-cell-item v-if="lostAndFoundData.receiveAddr!=null&&lostAndFoundData.receiveAddr!=''"
        :value="lostAndFoundData.receiveAddr" title="领取地点" :arrow="false">
      </u-cell-item>
      <u-cell-item v-else-if="lostAndFoundData.releaseType!='2'" title="领取地点" :arrow="false" :value="defaultValue">
      </u-cell-item>
      <u-cell-item v-if="lostAndFoundData.contactMode!=null" title="提交时间" :value="lostAndFoundData.createTime"
        :arrow="false">
      </u-cell-item>
      <!-- <u-cell-item :arrow="false" v-if="hasPermission()">
        <u-button style="margin-bottom: 10rpx;" type="primary" size="default" shape="circle"
          @click="navTo('form?id='+lostAndFoundData.id)">编辑</u-button>
        <u-button class="custom-style" type="error" size="default" shape="circle" @click="handleRemove()">删除</u-button>
      </u-cell-item> -->
    </u-cell-group>
    <u-modal v-model="show" :show-title="showTitle" :content="content" :title="title"></u-modal>
    <view class="footer">
      <view class="button primary" @click="navTo('form?id='+lostAndFoundData.id)">编辑</view>
      <view class="button danger" @click="handleRemove()">删除</view>
    </view>
  </view>
</template>
<script>
  /**
   * Copyright (c) 2013-Now http://aidex.vip All rights reserved.
   */
  import {
    validatenull
  } from '@/common/validate.js'
  export default {
    data() {
      return {
        goodsTypeList: [],
        releaseTypeList: [],
        fileList: [],
        imageArr: [],
        content: null,
        padding: 20,
        bottomSlot: true,
        defaultValue: '无',
        border: true,
        lostAndFoundData: {
          id: null,
          releaseType: 1,
          goodsType: null,
          contactName: null,
          contactMode: null,
          title: null,
          goodsDesc: null,
          receiveAddrTmp: null,
          receiveAddr: null,
          pics: null,
          createTime: null,
          createUser: null
        },
        show: false,
        showTitle: true,
        asyncClose: false,
        content: '',
        title: ''
      };
    },
    onLoad(param) {
      this.initReleaseType()
      this.initGoodsType()
      this.getDetail(param.id)
    },
    methods: {
      hasPermission() {
        if (this.vuex_roleName.includes('admin') || this.vuex_roleName.includes('rygly') || this.lostAndFoundData
          .createUser == this.vuex_userId) {
          return true;
        }
        return false;
      },
      initGoodsType() {
        this.$u.api.dictBizData({
          code: 'mis_goods_type'
        }).then(res => {
          this.goodsTypeList = res.data
        });
      },
      initReleaseType() {
        this.$u.api.dictBizData({
          code: 'mis_release_type'
        }).then(res => {
          this.releaseTypeList = res.data
        });
      },
      previewImage(index) {
        uni.previewImage({
          current: index,
          urls: this.imageArr
        })
      },
      navTo(url) {
        uni.navigateTo({
          url: url
        });
      },
      getDetail(id) {
        let params = {}
        params.id = id;
        this.$u.api.mis.lostAndFound.detail(params).then(res => {
          this.lostAndFoundData = res.data
          if (!validatenull(this.lostAndFoundData.pics)) {
            this.fileList = JSON.parse(this.lostAndFoundData.pics)
            this.fileList.forEach((item) => {
              this.imageArr.push(item.value);
            })
          }
        })
      },
      showModel(content, title) {
        this.title = title;
        this.content = content;
        this.show = true;
        this.showTitle = true;
      },
      navTo(url) {
        uni.navigateTo({
          url: url
        });
      },
      handleRemove() {
        let this_ = this;
        uni.showModal({
          title: '提示',
          content: "确认是否删除！",
          showCancel: true,
          success: function(res) {
            if (res.confirm) {
              let params = {}
              params.ids = this_.lostAndFoundData.id;
              this_.$u.api.mis.lostAndFound.remove(params).then(res => {
                if (res.code == 200) {
                  uni.showModal({
                    title: '提示',
                    content: "删除成功！",
                    showCancel: false,
                    success: function() {
                      uni.navigateTo({
                        url: "index"
                      });
                    }
                  });
                } else {
                  uni.showModal({
                    title: '提示',
                    content: "删除失败！",
                    showCancel: false,
                    success: function() {
                      uni.navigateTo({
                        url: "index"
                      });
                    }
                  });
                }
              })
            }
          }
        });

      }
    }
  };
</script>

<style lang="scss" scoped>
  .page {
    position: relative;
    height: 100vh;
    padding-bottom: 144rpx;
    background: #fff;
    overflow: auto;
  }

  .image-list {
    padding: 24rpx;
    margin-bottom: 16rpx;
  }

  .image-item {
    width: 100%;
    height: 300rpx;
    border-radius: 8rpx;
    background: #f7f7f7;
    overflow: hidden;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .u-item-title {
    position: relative;
    padding-left: 32rpx;
    margin-bottom: 32rpx;
    font-size: 28rpx;
    font-weight: 700;
    color: #333;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      display: inline-block;
      width: 4rpx;
      height: 40rpx;
      border-radius: 0px 6rpx 6rpx 0px;
      background-color: #3989FC;
    }
  }

  .u-cell-box {
    padding: 0 32rpx;

    /deep/ .u-cell {
      padding-left: 0;
      padding-right: 0;
    }

    /deep/ .u-cell_title {
      width: 160rpx !important;
      font-size: 28rpx;
      font-weight: 700;
      color: #000;
    }

    /deep/ .u-cell__value {
      text-align: left;
      font-size: 28rpx;
      font-weight: 500;
      color: #333;
    }
  }

  .footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: flex;
    padding: 24rpx;
    background: #fff;
  }

  .button {
    width: 100%;
    height: 96rpx;
    border-radius: 48rpx;
    line-height: 96rpx;
    text-align: center;
    font-size: 32rpx;
    font-weight: 500;
    color: #999;
    background: #fff;

    &.primary {
      color: #fff;
      background: #3989FC;
    }

    &.danger {
      color: #fff;
      background: #D43030;
    }

    &+.button {
      margin-left: 24rpx;
    }
  }
</style>